<!--
  版本信息显示组件
  
  显示当前运行环境的关键版本信息：
  - Electron 版本
  - Chromium 版本  
  - Node.js 版本
-->

<script setup lang="ts">
// 导入 Vue 3 响应式 API
import { reactive } from 'vue'

/**
 * 版本信息响应式对象
 * 从预加载脚本暴露的 Electron API 中获取版本信息
 */
const versions = reactive({ ...window.electron.process.versions })
</script>

<template>
  <!-- 版本信息列表 -->
  <ul class="versions">
    <!-- Electron 版本 -->
    <li class="electron-version">Electron v{{ versions.electron }}</li>
    <!-- Chromium 版本 -->
    <li class="chrome-version">Chromium v{{ versions.chrome }}</li>
    <!-- Node.js 版本 -->
    <li class="node-version">Node v{{ versions.node }}</li>
  </ul>
</template>
